<template>
    <div class="menubox "  :style="collapsed?'height: 100%;':'width:1.2rem;height: 100%;'">
      <div>
        <a-button type="primary"  @click='toggleCollapsed' style="border-color:#001529; background-color: #001529;">
          <MenuUnfoldOutlined v-if="collapsed" />
          <MenuFoldOutlined v-else />
        </a-button>
        <a-menu  mode="inline" theme="dark" :inline-collapsed="collapsed" v-model:openKeys="openKeys"
          v-model:selectedKeys="selectedKeys">

          <a-menu-item v-for="(item,index) in manuList" :key="index">
            <template #icon>
                <component :is="item.component"></component>
            </template>
            <router-link :to="item.path">{{item.name}}</router-link>
          </a-menu-item>



          <!-- <a-sub-menu key="sub1">
            <template #icon>
              <MailOutlined />
            </template>
            <template #title>Navigation One</template>
            <a-menu-item key="5">Option 5</a-menu-item>
            <a-menu-item key="6">Option 6</a-menu-item>
            <a-menu-item key="7">Option 7</a-menu-item>
            <a-menu-item key="8">Option 8</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <template #icon>
              <AppstoreOutlined />
            </template>
            <template #title>Navigation Two</template>
            <a-menu-item key="9">Option 9</a-menu-item>
            <a-menu-item key="10">Option 10</a-menu-item>
            <a-sub-menu key="sub3" title="Submenu">
              <a-menu-item key="11">Option 11</a-menu-item>
              <a-menu-item key="12">Option 12</a-menu-item>
            </a-sub-menu>
          </a-sub-menu> -->
        </a-menu>
      </div>
    </div>
</template>
<script setup> 
    import {defineComponent, reactive, defineProps, watch, ref} from 'vue';
    import {MenuFoldOutlined,MenuUnfoldOutlined} from '@ant-design/icons-vue';
    
    const props = defineProps({
        manuList: Array,
    })
    let manuList = ref(props.manuList)
    

    const toggleCollapsed = () => {
        state.collapsed = !state.collapsed;
        collapsed.value = state.collapsed;
        state.openKeys = state.collapsed ? [] : state.preOpenKeys;
    }
    const state = reactive({
        collapsed: false,
        selectedKeys: ['1'],
        openKeys: ['sub1'],
        preOpenKeys: ['sub1'],
    });

    let collapsed = ref(state.collapsed)
    watch(
        () => state.openKeys,
        (val, oldVal) => {
            state.preOpenKeys = oldVal;
        },
    );
</script>
